<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>div</title>
        <style type="text/css">

            div#firstDiv{
                background: red;
                width: 500px;
                height: 300px;

                position: fixed;
                top: 100px;
                left: 100px;

                /*关于浮动  */
                /*float: right;*/

                /*关于div  */
                /*margin-left: 50px;*/
                /*margin-top: 100px;*/
                /*margin-bottom: 30px;*/
                /*border-bottom: 4px;*/
                /*border-left: 10px;*/
                /*border-color: gold;*/
                /*border-style: dashed;*/
                /*padding-top: 100px;*/
                /*padding-left: 100px;*/
            }

            div#secondDiv{
                background: green;
                width: 300px;
                height: 100px;

                /*不管上下左右的位置设置了多少，定位方式是静态的都相当于没有定位  */
                /*position: static;*/
                /*top: 50px;*/
                /*left:50px;*/

                /*
                    相对于原位置，进行位置上的调整
                    一般上下选择其一，左右选择其一
                */
                /*position: relative;*/
                /*相当于left*/
                /*right: -50px;*/
                /*相当于top*/
                /*bottom: -70px;*/

                position: absolute;
                bottom:50px;
                right: 70px;

                /*关于浮动  */
                /*float: right;*/
                /*clear: right;*/

                /*关于div  */
                /*margin-left: 50px;*/
                /*margin-top: 100px;*/
                /*margin-bottom: 30px;*/
                /*border-bottom: 4px;*/
                /*border-left: 10px;*/
                /*border-color: gold;*/
                /*border-style: dashed;*/
                /*padding-top: 100px;*/
                /*padding-left: 100px;*/
            }

            p{
                display: inline;
            }

            span{
                display: block;
            }

        </style>
    </head>
    <body>

      <div id="firstDiv">
          <div id="secondDiv">
              这是第二个div
          </div>
      </div>

    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>
    <p>固定定位</p><br/>





    </body>

</html>